<?php

use app\assets\AppAsset;

AppAsset::addCss($this, '/plugin/vue-treeselect/css/vue-treeselect.min.css');
AppAsset::addCss($this, '/css/page/admin-menu-index.css');
?>

<el-header class="top-wrapper" height="auto">
    <el-row :inline="true" class="button-container">
        <el-col :xs="9" :sm="7" :md="6" :lg="5">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <a><i class="el-icon-location-outline"></i>&nbsp;首页</a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
        <el-col :xs="15" :sm="17" :md="18" :lg="19" class="text-right">
            <el-button class="" size="mini" type="success"
                       @click.native="goToCreate()">
                新建
            </el-button>
            <el-button class="" size="mini" type="danger"
                       @click.native="showClearDialog()">
                刷新角色菜单缓存
            </el-button>
            <el-dropdown size="mini">
                <el-button type="primary" size="mini">
                    更多操作
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">

                    <el-dropdown-item @click.native="openItem(null)"
                                      size="mini">
                        批量恢复
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="disabledItem(null)"
                                      size="mini" divided>
                        批量禁用
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-col>
        <el-col class="padding-top-10">
            <!-- 提醒 START -->
            <div class="tip no-margin-top">
                <el-collapse accordion>
                    <el-collapse-item>
                        <template slot="title">
                            <i class="el-icon el-icon-info"></i>
                            &nbsp;&nbsp;
                            <span class="title">
                                    温馨提示
                                </span>
                        </template>
                        <div class="content">
                            <p>
                                1、菜单<code>拖拽</code>可进行排序。
                            </p>
                            <p>
                                2、一级菜单为顶部菜单，二级菜单为左侧父级菜单，三级菜单为左侧二级下的子集菜单也就是最终可点击的连接跳转的菜单。一级菜单只有一个不展示顶部菜单。
                            </p>
                            <p>
                                3、菜单最多添加到3级，4及上不展示！
                            </p>
                            <p>
                                4、渲染菜单：将当前菜单的数据渲染为菜单并保存展示，此操作后可以去后台刷新，即可看到效果。
                            </p>
                            <p>
                                5、图标可以去参考<code><a href="https://element.eleme.cn/#/zh-CN/component/icon" target="_blank">[ELMENT UI官方文档(Icon 图标)]</a></code>找到自己喜欢的图标样式。
                            </p>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <!-- 提醒 END -->
        </el-col>
    </el-row>
    <el-form :inline="true" :model="searchForm" @submit.native.prevent
             class="search-container">
        <el-form-item label="名称过滤">
            <el-input placeholder="输入关键字进行过滤" v-model="searchForm.label"
                      size="small">
                <el-button slot="append" icon="el-icon-search"
                           size="small" @click="getList(false)">
                    刷新
                </el-button>
            </el-input>
        </el-form-item>
    </el-form>
</el-header>
<el-main class="content-wrapper">
    <div class="tree-header el-table">
        <el-row :inline="true">
            <el-col :span="14">
                菜单名称
            </el-col>
            <el-col :span="5">
                菜单排序
            </el-col>
            <el-col :span="5">
                菜单图标
            </el-col>
        </el-row>
    </div>
    <el-tree class="filter-tree"
             :data="dataList"
             :props="{}"
             default-expand-all
             :filter-node-method="filterNode"
             show-checkbox
             @check-change="handleTreeCheck"
             @node-drop="handelNodeDrop"
             :allow-drop="treeAllowDrop"
             :expand-on-click-node="false"
             ref="tree"
             draggable>
        <div class="custom-tree-node" slot-scope="{ node, data }">
            <div class="tree-item">
                <el-row :inline="true" :class="'node-lv-' + node.level">
                    <el-col :span="14" class="node-name">
                                <span v-if="node.disabled" class="disabled-tree-item">
                                    {{ node.label }}
                                </span>
                        <span v-else>
                                    {{ node.label }}
                                </span>
                    </el-col>
                    <el-col :span="5" class="node-field">
                                <span class="sort font-third">
                                    {{ data.sort }}
                                </span>
                    </el-col>
                    <el-col :span="5" class="node-field">
                        <span class="font-third" :class="data.font_icon"></span>
                    </el-col>
                </el-row>
            </div>
            <div class="tree-button-group" @mouseenter="setting.treeRightHover = true"
                 @mouseleave="setting.treeRightHover = false">
                <el-button type="text" size="mini" @click="goToUpdate(node.data.id)">
                    编辑
                </el-button>
                <el-button type="text" size="mini" @click="goToCreate(node.data.id, node)"
                           v-if="parseInt(node.level) < 3">
                    添加子集
                </el-button>
                <el-button type="text text-success" size="mini" v-if="node.disabled"
                           @click="openItem(node.data.id)">
                    开启
                </el-button>
                <el-button type="text text-danger" size="mini" v-else
                           @click="disabledItem(node.data.id)">
                    禁用
                </el-button>
            </div>
        </div>
    </el-tree>
</el-main>

<!-- 保存更新 -->
<el-dialog :title="baseDiaTitle + '菜单'" :visible.sync="setting.dialogVis"
           class="dialog-wrapper scroll-dialog" :lock-scroll="true" width="700px">

    <el-scrollbar class="main-scroller">
        <el-form :model="addForm" :rules="addFormRules" ref="addForm"
                 class="form-600 form-center form-full" label-width="100px">
            <el-form-item label="菜单名称" prop="name" class="txt-right"
                          :error="customErrMsg.name">
                <el-input placeholder="输入菜单名称" v-model="addForm.name"
                          size="small"></el-input>
            </el-form-item>
            <el-form-item label="菜单上级" prop="parent_id" class="txt-right"
                          :error="customErrMsg.parent_id">
                <treeselect
                        v-model="addForm.parent_id"
                        :options="addDataList"
                        :show-count="true"
                        :default-expand-level="3"
                        placeholder="请选择上级菜单"
                        noChildrenText="暂无子集菜单"
                >
                </treeselect>
            </el-form-item>
            <el-form-item label="菜单状态" prop="status" class=" txt-right">
                <el-radio-group v-model="addForm.status" :error="customErrMsg.status" size="mini">

                    <el-radio v-for="(item, key) in setting.statusTxt"
                              :label="parseInt(key)">
                        {{item}}
                    </el-radio>

                </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单连接" prop="url" class=" txt-right">
                <el-input placeholder="输入菜单连接" v-model="addForm.url"
                          type="textarea" :rows="2" :error="customErrMsg.url"
                          size="small"></el-input>
            </el-form-item>
            <el-form-item label="菜单排序" prop="sort" class=" txt-right">
                <el-input placeholder="输入菜单排序" v-model="addForm.sort"
                          :error="customErrMsg.sort" size="small"></el-input>
            </el-form-item>
            <el-form-item label="菜单图标名称" prop="sort" class=" txt-right">
                <el-input placeholder="输入菜单图标名称" v-model="addForm.font_icon"
                          :error="customErrMsg.font_icon" size="small"></el-input>
            </el-form-item>
        </el-form>
    </el-scrollbar>

    <div slot="footer">
        <el-button size="mini" type="primary" @click="submitAdd" v-if="setting.isAdd === true">
            创建
        </el-button>
        <el-button size="mini" type="primary" @click="submitUpdate('addForm')"
                   v-if="setting.isAdd === false">
            保存
        </el-button>
        <el-button size="mini" @click="setting.dialogVis = false">取消</el-button>
    </div>
</el-dialog>
<!-- 保存更新 -->

<!-- 刷新缓存弹出层 -->
<el-dialog title="更新缓存" :visible.sync="clearCache.showClearDialog"
           class="dialog-wrapper scroll-dialog dialog-small" :lock-scroll="true" width="40%"
           :append-to-body="true">

    <div v-loading="clearCache.showClearLoading" style="width: 100%;height: 100%;">
        <iframe :src="clearCache.pageUrl" class="clear-cache-iframe"
                id="clearCacheIframe" ref="cacheIframe"></iframe>
    </div>

    <div slot="footer">
        <el-button size="mini" @click="clearCache.showClearDialog = false">关闭</el-button>
    </div>
</el-dialog>
<!-- 刷新缓存弹出层 -->

<!-- 拖拽排序保存[form] -->
<el-form :inline="true" :model="clearRoleInfo.roleForm"
         class="display-inline float-right" ref="stageForm"
         style="display: none;">
</el-form>
<!-- 拖拽排序保存[form] -->

<?= AppAsset::addScript($this, '/plugin/vue-treeselect/js/vue-treeselect.min.js'); ?>
<?= AppAsset::addScript($this, '/js/page/admin-menu-index.js'); ?>
<?= $this->registerJs('new app();'); ?>
